/*
* @Author: yanyanru
* @Date: 2018/4/10
* @description: 人物列表
*/
<template>
  <div>
    <div class="p-30">
      <el-form labelWidth="100px">
        <el-row>
          <el-col :span="9">
              <el-form-item label="查询">
                <el-input v-model="personSearch.selectValue"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item labelWidth="10px">
              <el-select v-model="personSearch.selectType" placeholder="请选择" width="100%">
                <el-option v-for="item in personSearchNameType"
                  :key="item.dictValue"
                  :label="item.dictName"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="信息状态">
              <el-select v-model="infoStatusList" placeholder="请选择" @change="changeInfoStatus" multiple class="w-100">
                <el-option
                  v-for="item in infoStatus"
                  :key="item.dictValue"
                  :label="item.dictName"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="质检状态">
              <el-select v-model="qualityStatusList" placeholder="请选择" @change="changeQualityStatus" multiple style="width:70%;">
                <el-option
                  v-for="item in quality"
                  :key="item.dictValue"
                  :label="item.dictName"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>  
          <el-col class="pull-right space" :span="4">
            <el-button type="primary" class="m-t-5" @click="searchPersonList" round>搜索</el-button>
            <el-button type="primary" class="m-t-5 m-l-20" @click="addPerson" round>添加</el-button>
          </el-col> 
        </el-row>
      </el-form>
      <el-row :gutter="20">
        <el-col>
          <span class="m-r-15 ca-info-color">已编辑信息:{{totalData.editedCount}}条</span>
          <span class="m-r-15 ca-info-color">已发布信息:{{totalData.publishCount}}条</span>
          <span class="ca-info-color-red">质检未通过信息:{{totalData.qualityCount}}条</span>
        </el-col>
      </el-row>
      <el-table class="m-t-20" :data="personData" @sort-change="sortChange" stripe>
        <el-table-column  label="人物ID" width="90" align="center"  sortable="custom" prop="id">
          <template slot-scope="scope">
            {{scope.row.id}}
          </template>
        </el-table-column>
        <el-table-column label="中文名称" align="center" prop='cnName'>
          <template slot-scope="scope">
            {{scope.row.cnName}}
          </template>
        </el-table-column>
        <el-table-column label="企业名称" align="center" prop='fullName'>
          <template slot-scope="scope">
            {{scope.row.fullName}}
          </template>
        </el-table-column>
        <el-table-column label="发布时间" align="center" sortable="custom" prop="publishTime">
          <template slot-scope="scope">
            <el-row>
                <span>{{scope.row.publishTime | cmsMoment}}</span>
            </el-row>
            <el-row>
                <span> {{scope.row.publishUserName}}</span>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center" sortable="custom" prop="modifyTime">
          <template slot-scope="scope">
             <el-row>
                <span>{{scope.row.modifyTime | cmsMoment}}</span>
            </el-row>
            <el-row>
                <span> {{scope.row.modifyUserName}}</span>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="信息状态" align="center" width='90' prop="infoStatus">
          <template slot-scope="scope">
            <span :class="scope.row.infoStateColor">
              {{scope.row.infoStatus | getNameById("infoStatus")}}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="质检状态" align="center" prop="qualityStatus">
          <template slot-scope="scope">
            <span :class="scope.row.qualityStatusColor">
              {{scope.row.qualityStatus | getNameById("qualityStatus")}}
            </span>
          </template>
        </el-table-column>
         <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button  type="text" @click="edit(scope.row.id)">编辑</el-button>
                <el-button type="text" @click="deleteCheck(scope.row.id)">删除</el-button>  
                <el-button type="text" @click="toOperateHistory(scope.row.id, scope.row.cnName)">操作历史</el-button> 
            </template>
        </el-table-column>
      </el-table>
       <div class="m-t-20">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="1"
              :page-sizes="[25, 50, 75, 100]"
              :page-size="pageParam.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount">
          </el-pagination>
        </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch } from 'vue-property-decorator';
import PersonService from '../../../service/subject/person';
import { PageParam } from '../../../api/Interface';
import { PersonSearchDto } from '../../../service/subject/person/personInterface';
import { getParamsForList, setParamsForList } from '../../../libs/utils';
@Component({
  components: { }
})
export default class CompanyList extends Vue {
  // 初始化数据 相当于data
  public personSearch: PersonSearchDto = {} as PersonSearchDto; // <PersonSearchDto>
  public pageParam: PageParam = {} as PageParam; //分页
  public totalData: object = {};
  public infoStatusList: string[] = []; // 信息状态list
  public qualityStatusList: string[] = []; // 质检状态list
  public value: object[] = [];
  public name: string = '';
  public personSearchNameType: object[] = this.$store.state.user.dictionary.dicList.personSearchNameType; // 搜索下拉
  public quality: object[] = [{dictValue: '', dictName: '全部'}, ...this.$store.state.user.dictionary.dicList.qualityStatus]; // 质检状态
  public infoStatus: object[] = [{dictValue: '', dictName: '全部'}, ...this.$store.state.user.dictionary.dicList.infoStatus]; // 信息状态
  public personData: any[] = []; // 人物列表
  public totalCount: number = 100;
  public infoStateColor = {
    //信息状态颜色
    '1010': 'ca-info-color__gray',
    '0100': 'ca-info-color__blue',
    '0000': 'ca-info-color__light-blue',
    '1111': 'ca-info-color__orange',
    '0010': 'ca-info-color__purple',
  };
  public qualityStatusColor = {
    //质检状态颜色
    1: 'ca-quality-color__white',
    2: 'ca-quality-color__green',
    3: 'ca-quality-color__red'
  };
  // refs
  public $refs: { };
  // watch
  @Watch('value')
  public onChildChanged(val: string, oldVal: string) {
    return val + '***';
  }
  // 声明周期钩子
  // public mounted() {

  // }
  public created() {
    this.getTotalData();
    this.pageParam.pageIndex = 1;
    this.pageParam.pageSize = 10;
    // 获取local中存储的搜索条件
    const routerName = this.$root.$route.name;
    const localParams = getParamsForList(routerName);
    this.personSearch = Object.assign({}, this.personSearch, localParams.searchParams);
    this.pageParam = Object.assign({}, this.pageParam, localParams.pageParam);
    this.infoStatusList = localParams.infoStatusList ? localParams.infoStatusList : [];
    this.qualityStatusList = localParams.qualityStatusList ? localParams.qualityStatusList : [];
    // 获取local中存储的搜索条件 end
    this.searchPersonList();
  }

  // 方
  // 获取列表
  public async searchPersonList() {
    this.personSearch['pageParam.pageIndex'] = this.pageParam.pageIndex;
    this.personSearch['pageParam.pageSize'] = this.pageParam.pageSize;
    this.personSearch.infoStatus = this.infoStatusList.join(',');
    this.personSearch.qualityStatus = this.qualityStatusList.join(',');
    // local中存当前搜索条件 
    const params = {
      pageParam: this.pageParam,
      searchParams: this.personSearch,
      infoStatusList: this.infoStatusList,
      qualityStatusList: this.qualityStatusList
    };
    const routerName = this.$root.$route.name;
    setParamsForList(params, routerName);
    // local中存当前搜索条件 end
    const res = await PersonService.getPersonList(this.personSearch);
    this.personData = res.data.resultData;
    this.totalCount = res.data.totalCount;
    this.personData.map(val => {
      // 列表信息状态颜色
      val.infoStateColor = this.infoStateColor[val.infoStatus];
      // 列表质检状态颜色
      val.qualityStatusColor = this.qualityStatusColor[val.qualityStatus];
    });
  }
  // 获取统计数据
  public async getTotalData() {
    const totalData = await PersonService.getPersonCount();
    this.totalData = totalData;
  }
  // 删除前检查是否有关联数据
  public async deleteCheck(id: string) {
    const res = await PersonService.getDeletePersonCheck(id);
    if (res.data.eventRelation === 0 && res.data.companyRelation === 0) {
      this.$confirm('是否删除此条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delete(id);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  }
  // 删除人物接口 真删除
  public async delete(personId: string) {
    const {resCode} = await PersonService.deletePerson(personId);
    if (resCode === '0') {
       this.$message({
        type: 'success',
        message: '删除成功'
      }); 
      this.searchPersonList();
    }
  }
  // 编辑信息
  public edit(personId: string) {
    this.$router.push({name: 'person-detail', params: {id: personId}});
  }
  public addPerson() {
    this.$router.push({name: 'person-detail', params: {id: '-1'}});
  }
  // 分页
  public handleSizeChange(val: number) {
    this.pageParam.pageSize = val;
    this.searchPersonList();
  }
  // 当前页改变的时候
  public handleCurrentChange(val: number) {
    this.pageParam.pageIndex = val;
    this.searchPersonList();
  }
  // 跳转到操作历史
  public toOperateHistory(id: number, title: string) {
      // const base = new Base64();
      // console.log(Base64);
      this.$router.push({ name: 'operation-history', params: { businessName: 'person', businessId: id.toString(), businessType: '3', title: encodeURIComponent(title) }});
  }
  public sortChange(params: any) {
      if (!params.order) {
          this.personSearch.orderBy = '';
          this.personSearch.sort = '';
      } else {
          this.personSearch.sort = params.order === 'ascending' ? 'asc' : 'desc';
          this.personSearch.orderBy = params.prop;
          this.searchPersonList();
      }
  }
  // 选择全部信息状态
  public changeInfoStatus(val: string[]) {
      if (!(val.indexOf('') === -1)) {
          this.infoStatusList = [];
          const infos = this.$store.state.user.dictionary.dicList.infoStatus;
          infos.map(item => {
              this.infoStatusList.push(item.dictValue);
          });
      }
  }
  // 选择全部质检状态
  public changeQualityStatus(val: string[]) {
      if (!(val.indexOf('') === -1)) {
          this.qualityStatusList = [];
          const qualitys = this.$store.state.user.dictionary.dicList.qualityStatus;
          qualitys.map(item => {
              this.qualityStatusList.push(item.dictValue);
          });
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
